<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:1000px;margin:auto;">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="table-form"

          size="small"
        >
          <table class="table table-bordered th-bg">
            <tbody>
            <tr>
              <th width="200">诉求类型</th>
              <td >
                <el-form-item required prop="demandType">
                  <el-radio-group v-model="form.demandType">
                    <el-radio :label="1">要素保障</el-radio>
                    <el-radio :label="2">人力社保</el-radio>
                    <el-radio :label="3">安全生产</el-radio>
                    <el-radio :label="4">市场监督</el-radio>
                    <el-radio :label="5">政策咨询</el-radio>
                    <el-radio :label="6">融资贷款</el-radio>
                    <el-radio :label="7">市场销售</el-radio>
                    <el-radio :label="8">法律咨询</el-radio>
                    <el-radio :label="9">企业发展</el-radio>
                    <el-radio :label="10">其他</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="user.roleName=='管理员'">
              <th width="200">企业名称</th>
              <td>
                <el-form-item prop="enterpriseName">
                  <el-input v-model="form.enterpriseName	"/>
                </el-form-item>
              </td>
            </tr>
<!--            <tr>-->
<!--              <th width="200">诉求标题</th>-->
<!--              <td>-->
<!--                <el-form-item prop="demandTitle">-->
<!--                  <el-input v-model="form.demandTitle	"/>-->
<!--                </el-form-item>-->
<!--              </td>-->
<!--            </tr>-->
            <tr>
              <th width="200">诉求内容</th>
              <td >
                <el-form-item prop="demandContent">
                  <!-- <el-input v-model="form.creditCode	"/> -->
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="form.demandContent">
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="200">提交人</th>
              <td>
                <el-form-item
                  prop="submitter"
                >
                  <el-input v-model="form.submitter	"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="200">联系方式</th>
              <td>
                <el-form-item prop="contact">
                  <el-input v-model="form.contact	"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="200">附件</th>
              <td>
                <el-form-item prop="files">
                  <el-upload
                    :action="actionUrl"
                    list-type="picture-card"
                    :on-success="uploadFiles"
                    :on-remove="removeFiles"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </td>
            </tr>
            </tbody>
          </table>
          <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
            <el-button
              :loading="loading"
              type="primary"
              size="small"
              @click="submitForm"
            >
              {{isEdit ? '更新诉求' : '新增诉求'}}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import crudLandlord from '@/api/business/demand'
import { MessageBox } from 'element-ui'

const defaultForm = {

}

export default {
  components: {
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      actionUrl: '/sf_enterprise_service/business/file/upload',
      form: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        enterpriseName: [

        ],
        demandType: [
          {
            required: true,
            message: '请选择诉求类型'
          }
        ],
        // demandTitle: [
        //   {
        //     required: true,
        //     message: '请输入诉求标题'
        //   }
        // ],
        demandContent: [
          {
            required: true,
            message: '请输入诉求内容'
          }
        ],
        submitter: [
          {
            required: true,
            message: '请输入提交人'
          }
        ],
        contact: [
          {
            required: true,
            message: '请输入联系方式'
          }
        ],

      },
      loading: false,
      landlordId: null,
      // typeList: {
      //   1: '要素保障',
      //   2: '人力社保',
      //   3: '安全生产',
      //   4: '市场监督',
      //   5: '政策咨询',
      //   6: '融资贷款',
      //   7: '市场销售',
      //   8: '法律咨询',
      //   9: '企业发展'
      // },
      typeList: ['要素保障', '人力社保', '安全生产', '市场监督', '政策咨询', '融资贷款', '市场销售', '法律咨询', '企业发展']
    }
  },

  created() {
    store.dispatch('GetInfo').then(() => {})
    if (this.isEdit) {
      this.landlordId = this.$route.params && this.$route.params.id
      this.fetchData(this.landlordId)
    }else {
    }
  },
  methods: {
    uploadFiles(response, file, fileList) {
      console.log(response, file, fileList, 'upload')
      this.form.files = fileList
    },
    removeFiles(file, fileList) {
      console.log(file, fileList, 'remove')
      this.form.files = fileList
    },
    fetchData(id) {
      crudLandlord.get(id).then(response => {
        this.form = Object.assign({}, this.form, response.data)

        // if (response.data.fireFileList) {
        //   for (let i = 0; i < response.data.fireFileList.length; i++) {
        //     const item = response.data.fireFileList[i]
        //     const file = {
        //       fileId: item.fileId,
        //       name: item.fileName,
        //       url: `business/file/download?fileId=${item.fileId}`
        //     }
        //     this.fireFileList.push(file)
        //   }
        //   this.form.fireFileIdList = this.fireFileList.map(x => x.fileId)
        // }

      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/landlord')
    },

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        MessageBox.confirm('您确认执行此操作吗？', '确认操作', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          // let arr = []
          // this.form.files.forEach(item => {
          //   arr.push(item.response.fileId)
          // })
          // this.form.files = arr.join()
          console.log(this.form)
          if (this.isEdit) {
            crudLandlord.edit(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '修改信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            crudLandlord.add(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '提交信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch((e) => {
          console.log(e)
        });
      })
    },

  },
  mounted() {
    if (this.user.roleName == '管理员') {
      this.rules.enterpriseName.push({
        required: true,
        message: '请输入企业名称'
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}
</style>
